<template>
    <view class="box color-white">
        <view class="index-bg">
            <image :src="BASE_URL+'/uploads/20250801/39c51a0e801f881704f2cd6b5eade3da.png'" mode="widthFix"></image>
        </view>
        <view :style="{height:navBarHeight+ 'px'}" class="z-1 bar-box padding-l-r-25">
            <view class="address-box color-white">
                <image src="/static/image/home/address.png" mode="widthFix"></image>
                <text>{{ userInfo?userInfo.admin_name:''  }}</text>
                <image class="triangle-box" src="/static/image/home/icon-triangle.png" mode="widthFix"></image>
            </view>
        </view>
        <view class="content-box padding-l-r-25 z-1 margin-t-20">
            <view class="search-box flex-box">
                <view class="serach-input">
                    <u-icon name="search" color="#fff"></u-icon>
                    <input type="text" placeholder="搜索关键词" v-model="keyword" @focus="focusSearch"
                           placeholder-style="color:#FFFFFF">
                    <text>搜索</text>
                </view>
                <view class="notice-box color-white">
                    <image src="/static/image/home/notice-icon.png" mode="widthFix"></image>
                    <view class=" color-white">{{noticeList}}</view>
                </view>
            </view>
            <view class="margin-t-20">
                <view class=' justifyContent-spaceBetween color-white'>
                    <text>资讯中心</text>
                    <view class="align-self-center color-white" @click="goService">
                        <view style="margin-right: 12rpx" class=" color-white">更多资讯</view>
                        <u-icon name="arrow-down-fill" color="#fff" size="10"></u-icon>
                    </view>
                </view>
            </view>
            <view class="padding-20 border-radio-16 bg-white margin-t-20">
                <view class="consulting-box" @click="goArtDetails(list[0])" v-if="list && list.length ">
                    <text>{{ list[0].title}}</text>
                    <view class="consulting-img margin-t-20">
                        <image :src="BASE_URL + list[0].image" mode="aspectFill"></image>
                        <view class="justifyContent-spaceBetween consulting-content">
                            <text class="only-1">{{list[0].admin.nickname}}</text>
                            <text>{{ list[0].createtime }}</text>
                        </view>
                    </view>
                </view>
                <view v-for="(item ,index) in list"  @click="goArtDetails(item)">
                    <view class="consulting-list flex-box" v-show="index">
                        <view class="consulting-list-img">
                            <image :src="BASE_URL+item.image" mode="aspectFill"></image>
                        </view>
                        <view class="consulting-list-content flex-box">
                            <view class="only-1 title">{{item.title}}</view>
                            <view class="only-1 content">{{item.content}}</view>
                            <view class="only-1 time">{{item.createtime}}</view>
                        </view>
                    </view>

                </view>
            </view>
            <view class="margin-t-20">
                <view class="nav-list flex-box">
                    <view class="flex-box nav-list-details" v-for="(item ,index) in navList" :key="index"
                          :class="{'margin-b-38':index < 4}" @click="goNavDetails(item)">
                        <image :src="item.imgSrc" mode="aspectFill"></image>
                        <text>{{item.name}}</text>
                    </view>
                </view>
            </view>
            <!-- 健康助手 -->
            <view class="margin-t-20 assistant-box">
                <image :src="BASE_URL+'/uploads/20250801/8aed9013aac30a89a141c1bff6f63af4.png'" mode="widthFix"></image>
                <view class="assistant-img">
                    <image src="/static/image/home/assistant.png" mode="widthFix"></image>
                </view>
                <view class="assistant-info color-white">
                    <text>您的健康助手</text>
                    <view class="assistant-input flex-box">
                        <input class="flex-1" type="search" placeholder="有问题快速联系我们...">
                        <view></view>
                        <image src="/static/image/home/paperAirplane.png" mode="widthFix"></image>
                    </view>
                </view>
            </view>
            <view class="flex-box tips-box margin-t-20">
                <view class="Showings-img" @click="goView">
                    <image :src="BASE_URL+ '/uploads/20250801/db2d072dfcf2473e05e491f907203e67.png'" mode="widthFix">
                    </image>
                </view>
                <view class="color-333 justifyContent-spaceBetween tips-content">
                    <view class="tips-list" v-for="(item ,index) in shops" v-show="index <2" :key="index">
                        <text>{{item.nickname}} </text>
                        <view class="flex-box">
                            <view class="margin-l-20" v-for="e in item.goods">
                                <u--image :showLoading="true" :src="e.image" width="130rpx" height="130rpx" @click="goShopDetaisl(e)"></u--image>
                            </view>

                        </view>
                    </view>


                </view>
            </view>
        </view>
        <!-- 热门推荐 -->

        <view class="popular-recommendations z-1  margin-t-20">
            <text class="title">热门推荐</text>
            <waterFall ref="waterFall"></waterFall>
            <!-- <scroll-view scroll-y="true" @scrolltolower="scrolltolower" @refresherrefresh="refresherrefresh">

            </scroll-view> -->
        </view>

    </view>
</template>

<script>
import $baseUrl from "@/config/index.js"
const BASE_URL = $baseUrl.baseUrl
import BasicHealth from '@/static/image/home/BasicHealth.png';
import ConvenientService from '@/static/image/home/ConvenientService.png';
import CulturalPropaganda from '@/static/image/home/CulturalPropaganda.png';
import friendlyDesign from '@/static/image/home/friendlyDesign.png';
import HealthMall from '@/static/image/home/HealthMall.png';
import HealthPassbook from '@/static/image/home/HealthPassbook.png';
import HomeCare from '@/static/image/home/HomeCare.png';
import LivableHousing from '@/static/image/home/LivableHousing.png';
import waterFall from '@/components/waterfall/index.vue';
import {
    artList,
    getGoodsData
} from '@/api/home.js'
import {getUserInfo} from "@/api/user";
export default {
    components: {
        waterFall
    },
    data() {
        return {
            BASE_URL,
            navBarHeight: '',
            address: '郑州市',
            keyword: '',
            noticeList: 2,
			userInfo:{},
            list: [],
            shops: [],
            navList: [{
                imgSrc: BasicHealth,
                name: '基础健康',
                url: '/pageA/BasicHealth/BasicHealth'
            },
                {
                    imgSrc: HomeCare,
                    name: '居家护理',
                    url: '/pageA/homeCare/homeCare'
                },
                {
                    imgSrc: ConvenientService,
                    name: '便民服务',
                    url: '/pageA/service/index'
                },
                {
                    imgSrc: CulturalPropaganda,
                    name: '文化宣传',
                    url: '/pageA/culturalPropaganda/index'
                },
                {
                    imgSrc: friendlyDesign,
                    name: '适老设计',
                    url: '/pageA/elderlySuitable/index'
                },
                {
                    imgSrc: HealthMall,
                    name: '健康商城',
                    url: '/pageA/shop/shop'
                },
                {
                    imgSrc: LivableHousing,
                    name: '宜居房屋',
                    url: '/pageA/livableHousing/livableHousing'
                },
                {
                    imgSrc: HealthPassbook,
                    name: '健康存折',
                    url: '/pageA/healthPassbook/healthPassbook'
                },
            ]
        }
    },
    onLoad() {
        this.getBarHeight()
        this.$nextTick(() => {
            // 确保在这里访问 $refs 是安全的
            const myRef = this.$refs.waterFall;
            if (myRef) {
                this.$refs.waterFall.getList()
            }
        });
        this.geArtList()
        this.getGoodsData()
    },
    onPullDownRefresh() {
        // 下拉刷新时触发的逻辑
        console.log('下拉刷新时触发1');
        // this.$refs.waterFall.pullDownRefresh()
    },
    onReachBottom() {
        // this.$refs.waterFall.reachBottom()
    },
    onShow() {
        let token  = uni.getStorageSync('token')
        if(!token){
            uni.navigateTo({
                url:'/pages/login/login'
            })
        }else {
            this.getUserInfo(token)
        }
    },
    methods: {
        getUserInfo(token){
            getUserInfo({
                token
            }).then(res => {
                if (res.code == 1) {
                    this.userInfo = res.data
                    uni.setStorageSync('userInfo', res.data)
                    uni.setStorageSync('token', res.data.token)
                }
            })
        },
        getGoodsData() {
            getGoodsData().then(res => {
                if (res.code == 1) {
                    this.shops = res.data.shops
                }
            })
        },
        goShopDetaisl(e){
            uni.navigateTo({
                url:'/pageA/shop/details?id='+e.id
            })
        },
        geArtList() {
            artList({
                page: 1,
                limit: 3
            }).then(res => {
                if (res.code == 1) {
                    this.list = res.data
                } else {
                    uni.showToast({
                        title: res.msg,
                        icon: 'none'
                    })
                }
            })
        },
        goView() {
            uni.navigateTo({
                url: '/pageA/livableHousing/livableHousing'
            })
        },
        goArtDetails(item) {
            uni.navigateTo({
                url: '/pageA/consulting/details?id=' + item.id
            })
        },
        getBarHeight() {
            const systemInfo = uni.getSystemInfoSync();
            // 获取状态栏高度
            const statusBarHeight = systemInfo.statusBarHeight;

            // 微信小程序默认导航栏高度（单位为 px）
            const defaultNavBarHeight = 44;

            // 总体头部导航栏高度（包含状态栏）
            this.navBarHeight = statusBarHeight + defaultNavBarHeight;

        },
        scrolltolower() {
            // 上拉加载
            console.log('上拉加载');
            this.$refs.waterFall.reachBottom()
        },
        refresherrefresh() {
            // 下来刷新
            console.log('下来刷新');
            this.$refs.waterFall.pullDownRefresh()
        },
        focusSearch() {
            uni.navigateTo({
                url: '/pageA/search/search'
            })
        },
        goService() {
            uni.navigateTo({
                url: '/pageA/consulting/index'
            })

        },
        goNavDetails(item) {
            uni.navigateTo({
                url: item.url
            })
        }
    }
}
</script>

<style lang="scss" scoped>
.box {
    position: relative;
    min-height: 100vh;
    width: 100%;
    background: linear-gradient(180deg, #FFFFFF 0%, #F7F7F7 100%);
    z-index: 1;

    .content-box {
        position: relative;
        z-index: 1;
    }

    .bar-box {
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
    }

    .index-bg {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        z-index: 0;
    }

    .address-box {
        display: flex;
        align-items: center;
        height: 64rpx;

        image {
            width: 30rpx;
        }

        .triangle-box {
            margin-top: 20rpx;
            width: 10rpx;
        }

        text {
            margin: 0 12rpx;
        }
    }

    .search-box {
        align-items: center;

        .serach-input {
            display: flex;
            align-items: center;
            flex: 1;
            height: 66rpx;
            padding-left: 22rpx;
            font-size: 28rpx;
            color: #fff;
            background: rgba(255, 255, 255, 0.27);
            border-radius: 33rpx;
            border: 1px solid rgba(255, 255, 255, 0.49);

            input {
                flex: 1;
                margin-left: 20rpx;
            }

            input::placeholder {
                color: red;
            }


            text {
                padding: 0 22rpx;
                font-size: 28rpx;
                color: #fff;
                border-left: 1px solid #fff;
            }
        }

        .notice-box {
            position: relative;
            margin-left: 20rpx;

            image {
                width: 50rpx;
            }

            view {
                position: absolute;
                top: 0;
                left: 50%;
                height: 24rpx;
                min-width: 24rpx;
                border-radius: 12rpx;
                background: #FF7A3A;
                font-size: 20rpx;
                line-height: 24rpx;
                text-align: center;
            }
        }
    }

    .nav-list {
        flex-wrap: wrap;
        padding: 25rpx 0;
        background: #FFFFFF;
        border-radius: 16rpx;
        color: #333;
        font-size: 26rpx;

        .nav-list-details {
            flex-direction: column;
            justify-content: center;
            align-items: center;
            width: 25%;

            image {
                width: 80rpx;
				height: 80rpx;
            }

            text {
                font-size: 26rpx
            }
        }

        .margin-b-38 {
            margin-bottom: 38rpx;
        }
    }

    .tips-box {
        justify-content: space-between;

        .Showings-img {
            width: 340rpx;
        }

        .tips-content {
            flex-direction: column;
        }

        .tips-list {
            width: 340rpx;
            height: 210rpx;
            background-image: url('/static/image/home/tips-bg.png');
            background-size: 100% 100%;

            text {
                line-height: 66rpx;
                padding-left: 20rpx;
                font-size: 28rpx;
                font-weight: 500;

            }
        }
    }
}

.popular-recommendations {
    background: #F7F7F7;
    border-radius: 30rpx 30rpx 0 0;

    .title {
        display: block;
        padding: 20rpx 0;
        color: #000;
        font-size: 32rpx;
        font-weight: 500;
        text-align: center;
    }
}

.detail-count {
    font-size: 26rpx
}

.assistant-box {
    position: relative;

    .assistant-bg {
        width: 100%;
    }

    .assistant-img {
        position: absolute;
        top: -20rpx;
        right: 35rpx;

        image {
            width: 140rpx;
            height: 140rpx;
        }
    }

    .assistant-info {
        position: absolute;
        left: 20rpx;
        bottom: 20rpx;

        text {
            display: block;
            margin-bottom: 24rpx;
            font-weight: bold;
            font-size: 32rpx;
        }

        .assistant-input {
            width: 660rpx;
            height: 80rpx;
            padding: 0 26rpx;
            align-items: center;
            background: #F1FCFF;
            border-radius: 9rpx;
            border: 1px solid #83C8D8;
            box-sizing: border-box;

            view {
                width: 1px;
                height: 40rpx;
                background: #DBDBDB;
                margin: 0 25rpx;
            }

            input {
                font-size: 28rpx;
            }

            image {
                width: 35rpx;
            }
        }
    }
}

.justifyContent-spaceBetween {

    font-size: 24rpx;

    text {
        font-size: 34rpx;
        font-weight: bold;
    }

    view {}
}

.consulting-box {
    text {
        font-size: 28rpx;
        color: #000;
        font-weight: bold;
    }

    .consulting-img {
        position: relative;
        border-radius: 14rpx;
        overflow: hidden;

        text {

            font-size: 24rpx;
            color: #f7f7f7;
            font-weight: normal;
        }

        image {
            height: 260rpx;
        }

        .consulting-content {
            align-items: center;
            position: absolute;
            left: 0;
            bottom: 0;
            width: 100%;
            height: 60rpx;
            padding: 0 10rpx;
            box-sizing: border-box;

            .only-1 {
                max-width: 500rpx;
            }
        }
    }
}

.consulting-list {
    padding: 20rpx 0;
    border-bottom: 1px solid #DBDBDB;

    &:last-child {
        border-bottom: 0;
    }

    .consulting-list-img {
        border-radius: 14rpx;
        min-width: 200rpx;
        overflow: hidden;

        image {
            width: 200rpx;
            height: 140rpx;
        }
    }

    .consulting-list-content {
        flex-direction: column;
        justify-content: space-between;
        flex: 1;
        overflow: hidden;
        margin-left: 20rpx;

        .time {
            font-size: 24rpx;
            color: #808080;
        }

        .content {
            font-size: 26rpx;
            color: #707070;
        }

        .title {
            font-size: 28rpx;
            color: #000;
            font-weight: bold;
        }
    }
}
</style>
